<template>
	<view class="container">
		<view class="content" :style="{backgroundColor:box_style==2?'#FFFFFF':'#F8F8F8'}">
			<view class="screen">
				<view class="tab">
					<view class="tab-item" :class="tab==1 ? 'select' : ''" @click="tabClick(1)">
						<text>综合</text>
					</view>
					<view class="tab-item" :class="tab==2 ? 'select' : ''" @click="tabClick(2,sort)">
						<text>价格</text>
						<image v-if="sort_price==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
						<image v-if="sort_price==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
					</view>
					<view class="tab-item" :class="tab==3 ? 'select' : ''" @click="tabClick(3,sort)">
						<text>销量</text>
						<image v-if="sort_num==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
						<image v-if="sort_num==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
					</view>
					<view class="tab-item box-style" @click="tabClick(4,box_style)">
						<image v-if="box_style==1" :src="$img_path('/course/s_i_1.png')" mode="widthFix"></image>
						<image v-if="box_style==2" :src="$img_path('/course/s_i_2.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="item" :class="box_style==2 ? 'column-class' : 'row-class' " v-for="(item,i) in 4" :key="i" :style="{width: box_style==1 ? '343rpx' : '100%'}">
					<shopGoods :styleType="box_style" :imageStyle="{width:box_style==2 ? '260rpx' : '343rpx',height:box_style==2 ? '260rpx' : '343rpx'}">
						<text slot="center" style="margin-top: 16rpx;display: block;">销量：1000</text>
						<view slot="tagList" class="tagList">
							<view class="tag-item">
								标签标签
							</view>
							<view class="tag-item">
								标签标签
							</view>
							<view class="tag-item">
								标签标签
							</view>
						</view>
					</shopGoods>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import headerSearch from '@/components/header-search/header-search.vue'
	import shopGoods from '@/components/service-box/mall-item-box.vue'
	export default {
		components: {
			headerSearch,
			shopGoods
		},
		data() {
			return {
				sort_price: 1,
				sort_num: 1,
				tab:1,
				box_style:1,
				searchValue:''
			};
		},
		methods:{
			navback(){
				uni.navigateBack()
			},
			searchBlur(val) {
				this.searchValue = val.detail.value
			},
			tabClick(type,val){
				switch (type){
					case 1:
						break;
					case 2:
						if(this.tab==type){
							if(this.sort_price == 1){
								this.sort_price = 2
							}else{
								this.sort_price = 1
							}
						}
						break;
					case 3:
						if(this.tab==type){
							if(this.sort_num == 1){
								this.sort_num = 2
							}else{
								this.sort_num = 1
							}
						}
						break;
					default:
						if(this.box_style==1){
							this.box_style = 2
						}else{
							this.box_style = 1
						}
						break;
				}
				if(type!=4){
					this.tab = type
				}
			},
		
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.nav-slot{
	width: 100%;
	padding: 0 14rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	&>image{
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}
}
.container{
	.content{
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		min-height: 90vh;
		.screen {
			// padding: 30rpx 0rpx 0;
			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 24rpx 14rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				// margin-bottom: 32rpx;
				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;
					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #999999;
						line-height: 44rpx;
					}
					&.select {
						text {
							color: #E72A2A;
						}
					}
		
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	
		.list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx 22rpx 0;
			.item{
				box-sizing: border-box;
				&.column-class{
					padding: 20rpx 0;
					border-bottom: 2rpx solid #F8F8F8;
					&:first-child{
						padding-top: 0;
					}
				}
				&.row-class{
					padding-bottom: 20rpx;
				}
				.tagList{
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.tag-item{
						// width: 118rpx;
						height: 34rpx;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						border: 2rpx solid #0291FF;
						font-weight: 400;
						font-size: 20rpx;
						color: #0291FF;
						// line-height: 34rpx;
						text-align: center;
						padding: 3rpx 12rpx;
						box-sizing: border-box;
						margin-left: 12rpx;
						&:first-child{
							background: #FF6602;
							border-color: #FF6602;
							color: #FFFFFF;
							margin-left: 0;
						}
					}
				}
			}
		}
	}
}
</style>
